<template>
  <div>
    <el-row :gutter="10" justify="center" v-for="(item, x) in data.length / 5" :key="x">
        <el-col :span="4" v-for="(item, y) in 5" :key="y" style="margin-bottom: 10px;">
          <item-card
          :name="data[x * 5 + y].name"
          :price="data[x * 5 + y].price"
          :url="data[x * 5 + y].image"
          :commodityId="data[x * 5 + y].commodityId"
        ></item-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import ItemCardVue from "@/components/index/ItemCard.vue";
import { commodityAll } from "@/api/commodity.js";

export default {
  components: { ItemCard: ItemCardVue },
  props: {
    data: Array,
  },
  data() {
    return {
      page: 0,
      pageSize: 10,
      data: [],
    };
  },
  methods: {
    all() {
      commodityAll(this.page, this.pageSize).then((res) => {
        this.data = res.list;
      });
    },
  },
  created() {
    this.all();
  },
};
</script>